<template>
  <view class="category-container">
    <Navbar title="产品" :showStatusbar="false"/>
    <view style="height: 20rpx"></view>
    <view class="search-wrapper">
      <u-input class="input" v-model="keyword" placeholder="请输入关键字"></u-input>
      <view class="search-button" @click="onSearch">搜索</view>
    </view>
    <view class="category-tabs">
      <view
        v-for="(tab, idx) in categoryTabs"
        :key="tab.id"
        :class="['tab-item', { active: tab.id === activeTabIndex }]"
        @click="onTabChange(tab.id)"
      >
        {{ tab.name }}
      </view>
    </view>
    <view class="product-list">
      <view @click="toDetail(item)" class="product-card" v-for="item in products" :key="item.id">
        <image :src="item.logo_url" class="product-logo" mode="aspectFit" />
        <view class="product-info">
          <view class="product-title">{{ item.name }}</view>
          <view class="product-meta">
            <text class="meta-label">最高额度</text>
            <text class="meta-value max-amount">{{ item.max_amount }}</text>
          </view>
          <view class="product-meta">
            <text class="meta-label">年化利率</text>
            <text class="meta-value rate">{{ item.min_annual_rate }}% ~ {{ item.max_annual_rate }}%</text>
          </view>
          <view class="product-meta">
            <text class="meta-label">期限</text>
            <text class="meta-value">{{ item.min_term }}~{{ item.max_term }}期</text>
          </view>
        </view>
      </view>
      <view v-if="products.length === 0" class="empty-list">暂无相关产品</view>
    </view>
  </view>
</template>
<script>
import Navbar from "../../components/navbar.vue";

export default {
  components: {Navbar},
  data() {
    return {
      keyword: '',
      categoryTabs: [
      ],
      activeTabIndex: '',
      products: [

      ]
    }
  },
  onShow() {
    uni.showLoading()
    this.$api.getProductCategoryList().then(res => {
      this.categoryTabs = [
        { name: '全部', id: '' },
        ...res,
      ]
      if (!this.activeTabIndex) {
        if (this.categoryTabs.length) {
          this.activeTabIndex = ''
        }
      }
      this.getList()
    })
  },
  methods: {
    getList() {
      uni.showLoading()
      this.$api.getProductList({
        category_id: this.activeTabIndex ? this.activeTabIndex : undefined,
        pageSize: 9999,
        name: this.keyword || undefined
      }).then(res => {
        this.products = res.rows
      }).finally(() => {
        uni.hideLoading()
      })
    },
    onSearch() {
      this.activeTabIndex = ''
      this.getList()
    },
    onTabChange(idx) {
      this.keyword = ''
      this.activeTabIndex = idx;
      // TODO: 这里可以根据tab切换刷新产品列表
      this.getList()
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/product/detail?id=' + item.id
      })
    }
  }
}
</script>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.category-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  position: relative;
  .search-wrapper {
    width: 100%;
    height: 60rpx;
    opacity: 1;
    border-radius: 30rpx;
    background: rgba(247, 248, 250, 1);
    border: 0.5px solid rgba(166, 166, 166, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30rpx;
    .input {
      flex-grow: 1;
    }
    .search-button {
      width: 140rpx;
      height: 60rpx;
      line-height: 60rpx;
      opacity: 1;
      border-radius: 30rpx;
      text-align: center;
      font-size: 24rpx;
      color: #ffffff;
      background-color:  rgba(255, 195, 0, 1);
    }
  }
  .category-tabs {
    display: flex;
    margin-top: 32rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow-x: auto;
    padding: 16rpx 32rpx;
    .tab-item {
      flex-shrink: 0;
      padding: 0 32rpx;
      height: 56rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      color: #666;
      border-radius: 28rpx;
      margin-right: 16rpx;
      background: transparent;
      transition: background 0.2s, color 0.2s;
      &.active {
        color: #ffffff;
        background: #f7c300;
        font-weight: bold;
      }
    }
  }
  .product-list {
    display: flex;
    flex-direction: column;
    margin-top: 32rpx;
    .product-card {
      width: 100%;
      border-radius: 20rpx;
      background: #fff;
      padding: 20rpx;
      display: flex;
      margin-bottom: 24rpx;
    }
    .product-logo {
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
      border-radius: 12rpx;
      background: #f6f6f6;
    }
    .product-info {
      flex: 1;
    }
    .product-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }
    .product-meta {
      display: flex;
      align-items: center;
      font-size: 22rpx;
      color: #888;
      margin-top: 8rpx;
    }
    .meta-label {
      margin-right: 8rpx;
      color: #bbb;
    }
    .meta-value {
      color: #222;
      font-weight: 400;
    }
    .meta-value.rate {
      color: #ff6600;
    }
    .meta-value.max-amount {
      color: #e94e3c;
      font-size: 28rpx;
      font-weight: bold;
    }
    .empty-list {
      text-align: center;
      color: #bbb;
      margin: 60rpx 0;
      font-size: 28rpx;
    }
  }
}
</style>